<template>
    <div class="suggestion">
        <div class="breadcrumb">
            <el-breadcrumb>
                <el-breadcrumb-item>
                    <el-icon>
                        <HomeFilled/>
                    </el-icon>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    建议列表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card body-style="padding:20px 10px" class="up">
            <SuggestionUp/>
        </el-card>
        <div class="down">
            <SuggestionDown/>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { HomeFilled } from '@element-plus/icons-vue'
import SuggestionUp from '@/components/Advise/adviseUp.vue'
import SuggestionDown from '@/components/Advise/adviseDown.vue'
</script>

<style lang='scss' scoped>
.suggestion {
  .breadcrumb {
    margin: 15px 0;
  }

  .el-alert {
    letter-spacing: 0.5em;
  }

  .up {
    border: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid var(--el-border-color);
  }

  .down {
    padding: 20px;
    box-shadow: var(--el-box-shadow-light);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--el-border-color);
  }
}
</style>